<template>
    <div class="text-style-panel">
        <div class="preset-style">
            <div class="preset-style-item bg1" @click="enterScreening()">
                <div class="group-menu-item">
                    <div class="menu-item" v-tooltip="'幻灯片放映'">
                        <IconPpt class="icon" />
                    </div>
                    <Popover trigger="click" center @click.stop>
                        <template #content>
                            <PopoverMenuItem @click="enterScreeningFromStart()">从头开始</PopoverMenuItem>
                            <PopoverMenuItem @click="enterScreening()">从当前页开始</PopoverMenuItem>
                        </template>
                        <div class="arrow-btn">
                            <IconDown class="arrow" />
                        </div>
                    </Popover>
                </div>

                <div class="menu-text">幻灯片放映</div>
            </div>
            <div class="preset-style-item bg2" @click="linkDialogForQuote">
                <div class="menu-item" v-tooltip="'关联报价单数据'">
                    <div class="menu-icon">
                        <IconAfferent class="icon" />
                    </div>

                </div>
                <div class="menu-text">关联数据</div>
            </div>
            <div class="preset-style-item bg3" @click="setDialogForExport('pptx')">
                <div class="menu-item" v-tooltip="'导出'">
                    <IconDownload class="icon" />
                </div>
                <div class="menu-text">导出</div>
            </div>
            <div class="preset-style-item bg4" @click="saveModule">
                <div class="menu-item" id="ppt-des-5" v-tooltip="'保存模板到模板库'">
                    <IconMemoryCard class="icon" />
                </div>
                <div class="menu-text">保存模板</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import useScreening from '@/components/PPTist/hooks/useScreening'
import type { DialogForExportTypes } from '@/components/PPTist/types/export'

import { useMainStore, useSlidesStore } from '@/components/PPTist/store'

const { enterScreening, enterScreeningFromStart } = useScreening()
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const mainStore = useMainStore()
const setDialogForExport = (type: DialogForExportTypes) => {
    mainStore.setDialogForExport(type)
    //   mainMenuVisible.value = false
}
// 显示关联报价单dialog
const linkDialogForQuote = () => {
    //   mainMenuVisible.value = false
    proxy.$emit('show')
}
// 保存模板
const saveModule = () => {
    //   mainMenuVisible.value = false
    proxy.$emit('saveModule')
}
</script>

<style lang="scss" scoped>
.text-style-panel {
    user-select: none;
}

.preset-style {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.preset-style-item {
    width: 50%;
    height: 50px;
    border: solid 1px $themeColor;
    // border-bottom: 1px solid $borderColor;
    // border-right: 1px solid $borderColor;
    box-sizing: border-box;
    // display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all $transitionDelay;

    color: #fff;
    z-index: 1;
    background-color: #DCDFE6;

    // &:hover {
    //     border-color: $themeColor;
    //     border-top: 1px solid $themeColor;
    //     border-left: 1px solid $themeColor;
    //     color: $themeColor;
    //     z-index: 1;
    // }

    &:nth-child(2n) {
        margin-left: -1px;
    }

    &:nth-child(n+3) {
        margin-top: -1px;
    }
}

.group-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-text,
.group-menu-item,
.menu-item {
    text-align: center;
}

.bg1 {
    background-color: #FE9C72;
}

.bg2 {
    background-color: #29CBBB;
}

.bg3 {
    background-color: #F5CE53;
}

.bg4 {
    background-color: #E15B3E;
}
</style>